<template>
    <div class="cate-box">
        <header>
            <van-search v-model="search" @search="seaEvt(search)" @click-left-icon="seaEvt(search)" placeholder="请输入你想要的商品" />
        </header>
        <main>
            <div class="assort">
                <ul>
                    <li v-for="it in goodsAssort" :class="[selectedType === it && 'act']" :key="it" @click="typeClick(it)">{{ it }}</li>
                </ul>
            </div>
            <div class="goodsList" ref="node">
                <div class="list">
                    <div class="goods" v-for="it in goodsList" :key="it.id" @click="detEvt(it.id)">
                        <img :src="it.img">
                        <p>{{ it.type }}</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script lang="ts" setup>
import { Ref, ref } from 'vue';
import { goodsAssortApi, goodsTypeApi } from '../../apis/goodsApi';
import router from '../../router';
import detEvt from '../details/detEvt';

const search:Ref<string> = ref('')

/** 商品列表 */
const goodsAssort = ref([])
getGoodsAssort()
async function getGoodsAssort() {
    let res = await goodsAssortApi()
    goodsAssort.value = res.data
}

/** 选中类型 */
const selectedType:Ref<string> = ref('女装')
const node = ref()
function typeClick(it: string) {
    selectedType.value = it
    goodsTpye(it)
    node.value.scrollTop = 0
}

/** 商品数据 */
const goodsList:any = ref([])
goodsTpye('女装')
async function goodsTpye(type: string) {
    let res = await goodsTypeApi(type)
    goodsList.value = res.data
}

/** 搜索 */
function seaEvt(val: string) {
    sessionStorage.setItem('search', val)
    router.push('/search')
}
</script>

<style lang="less" scoped>
@import '../../style/common.less';

.cate-box {
    width: 100vw;
    height: 100%;

    header {
        width: 100%;
        height: 64px;
        background-color: @b5;
        padding-top: 10px;

        .van-search {
            background-color: @b5;
        }
    }

    main {
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        
        .assort>ul {
            width: 80px;
            background-color: @b5;
            text-align: center;
            line-height: 60px;
            font-size: 18px;
        }

        .goodsList {
            padding: 10px;
            overflow-x: hidden;
            &::-webkit-scrollbar {
                display: none;
            }

            .list {
                display: flex;
                flex-wrap: wrap;

                .goods {
                    width: calc(100% / 3);
                    height: 110px;
                    text-align: center;

                    img {
                        width: 80px;
                        height: 80px;
                    }

                    p {
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

.act {
    background-color: @g1;
    font-size: 20px;
}
</style>